<!--  -->
<template>
  <div class="save-system">
    <el-dialog :title="title" :visible.sync="dialogVisible" width="490px" @closed="hidden" :close-on-click-modal="false">
      <el-form :model="system" v-loading="loading" :rules="rules" ref="systemForm" @submit.native.prevent
        label-width="80px">
        <el-form-item label="系统名称" prop="name">
          <el-input size="medium" v-model="system.name" autocomplete="off" style="width: 370px;"
            placeholder="输入小于100个字符的系统名称">
          </el-input>
        </el-form-item>
        <el-form-item label="系统类型" prop="systemTypeId"
          :rules="system.id > 0 ? [{ required: false }] : rules.systemTypeId">
          <el-select size="medium" v-model="system.systemTypeId" style="width: 370px;" placeholder="选择系统类型"
            :disabled="system.id > 0">
            <el-option v-for="item in systemTypeFilter" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hidden" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    resetData: {
      type: Function
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    var checkIshas = (rule, value, callback) => {
      let bool = true
      this.tableData.map(item => {
        if (item.id !== this.system.id) {
          if (value === item.name) {
            bool = false
          }
        }
      })
      if (!bool) {
        callback(new Error('系统名称已存在'))
      } else {
        return callback()
      }
    }
    return {
      title: '',
      loading: false,
      dialogVisible: false,
      system: {},
      systemType: [],
      rules: {
        name: [
          { required: true, message: '请输入系统名称', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在1到100个字符', trigger: 'blur' },
          { validator: checkIshas, trigger: 'blur' }
        ],
        systemTypeId: [
          { required: true, message: '请选择系统类型', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    systemTypeFilter () {
      return this.systemType.filter(item => [2, 4].indexOf(item.id) === -1)
    }
  },
  methods: {
    show (title, system) {
      this.title = title
      this.dialogVisible = true
      // 加载获取系统类型
      this.loading = true
      this.$post('/system/type-infos').then((response) => {
        this.loading = false
        if (response && response.length > 0) {
          this.systemType = response
        } else {
          this.systemType = []
        }
      })
      if (system) {
        this.system = JSON.parse(JSON.stringify(system))
      } else {
        // 默认情况下的数据
        this.system = {
          id: 0,
          name: '',
          systemTypeId: null
        }
      }
    },
    hidden () {
      if (this.$refs['systemForm']) {
        this.$refs['systemForm'].clearValidate()
      }
      this.dialogVisible = false
      this.system = {}
      this.systemType = []
      this.loading = false
    },
    save () {
      if (this.loading) {
        return
      }
      /**
       * :rules="rules"
        ref="systemForm"
       */
      this.$refs['systemForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$jpost('/system/save', this.system).then(response => {
            if (response && response.id) {
              this.dialogVisible = false
              this.system = {}
              this.systemType = []
              this.resetData()
            } else {
              this.hidden()
            }
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>
<style scoped>
.save-system /deep/ .el-dialog__body {
  padding-bottom: 10px;
}
.save-system /deep/ .el-form-item {
  margin-bottom: 15px;
}
.save-system /deep/ .el-input.is-disabled .el-input__icon{
  display: none;
}
</style>
